<template>
	<view class="test-map-page">
		<view class="test-content">
			<view class="test-title">物流轨迹地图测试</view>
			
			<button class="test-btn" @click="testLogisticsMap">测试轨迹地图</button>
			
			<view class="test-info">
				<text>点击按钮测试物流轨迹地图功能</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testLogisticsInfo: {
					LogisticCode: 'SF1234567890',
					PreCoordinates: [
						{
							latitude: 39.9042,
							longitude: 116.4074,
							description: '北京发货点'
						},
						{
							latitude: 39.9142,
							longitude: 116.4174,
							description: '北京转运中心'
						},
						{
							latitude: 39.9242,
							longitude: 116.4274,
							description: '北京朝阳区营业点'
						},
						{
							latitude: 39.9342,
							longitude: 116.4374,
							description: '派送中'
						},
						{
							latitude: 39.9442,
							longitude: 116.4474,
							description: '已签收'
						}
					],
					Traces: [
						{
							AcceptStation: '快件已签收，签收人：门卫',
							AcceptTime: '2024-01-15 14:30:00'
						},
						{
							AcceptStation: '快件正在派送中，派送员：张三',
							AcceptTime: '2024-01-15 09:15:00'
						},
						{
							AcceptStation: '快件已到达【北京朝阳区营业点】',
							AcceptTime: '2024-01-15 08:30:00'
						},
						{
							AcceptStation: '快件运输中，已到达【北京转运中心】',
							AcceptTime: '2024-01-14 22:15:00'
						},
						{
							AcceptStation: '快件已发出，发件人：瑞隆安',
							AcceptTime: '2024-01-14 18:00:00'
						}
					]
				}
			}
		},
		methods: {
			testLogisticsMap() {
				// 将测试物流信息传递给物流页面
				const logisticsInfoStr = encodeURIComponent(JSON.stringify(this.testLogisticsInfo));
				uni.navigateTo({
					url: `/subPackage_1/pages/order/see_logistics?orderId=test&logisticsInfo=${logisticsInfoStr}`
				});
			}
		}
	}
</script>

<style>
	.test-map-page {
		min-height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.test-content {
		background-color: #fff;
		padding: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.test-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
	}

	.test-btn {
		background-color: #07c160;
		color: #fff;
		font-size: 32rpx;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
		border: none;
		margin-bottom: 30rpx;
	}

	.test-btn:active {
		background-color: #06ad56;
	}

	.test-info {
		color: #666;
		font-size: 28rpx;
	}
</style>

